import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class CustomSwiperBannerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new CustomSwiperBannerState();
  }
}

class CustomSwiperBannerState extends State<CustomSwiperBannerPage> {
  List<Map> swiperDataList = [
    {
      "image":
          "https://images.baixingliangfan.cn/advertesPicture/20200316/20200316110145_8839.jpg",
      "urlType": 0,
      "goodsId": "21bdfb02530e4a7584637d0f62e7259d"
    },
    {
      "image":
          "https://images.baixingliangfan.cn/advertesPicture/20200323/20200323140148_2601.jpg",
      "urlType": 0,
      "goodsId": "003a379ded2a4824ad7cfd3108b5367b"
    },
    {
      "image":
          "https://images.baixingliangfan.cn/advertesPicture/20200323/20200323140241_8458.jpg",
      "urlType": 0,
      "goodsId": "1fdd56e3a33f4e7eb8c73d554a9cd13a"
    }
  ];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 140,
      child: Swiper(
        //轮播图的数量
        itemCount: swiperDataList.length,
        //构造器
        itemBuilder: (BuildContext context,int index){
          return ConstrainedBox(constraints: new BoxConstraints.expand(),
            child: Image.network("${swiperDataList[index]['image']}",
            fit: BoxFit.fitWidth,
            ),
          );
        },
      //是否有指示器
        pagination: buildSwiperPagination3(),
        //是否轮播
        autoplay: true,
        //点击事件
        onTap: (int index){
        },
        //相邻子条目视窗比例
        viewportFraction: 0.8,
        //用户进行操作时停止自动翻页
        autoplayDisableOnInteraction: true,
        //无限轮播
        loop: true,
        //当前条目缩放比例
        scale: 0.8,
      ),

    );
  }
  //自定圆点分页指示器
  buildSwiperPagination(){
    return SwiperPagination(
      //指示器显示的位置
      alignment: Alignment.bottomCenter,//位置Alignment.bottomCenter 底部中间
      //距离调整
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
      //指示器构建
      builder: DotSwiperPaginationBuilder(
        //点之间的距离
        space: 2,
        //没选中时的大小
        size: 6,
        //选中时的大小
        activeSize: 12,
        color: Colors.black,
        activeColor: Colors.white
      )
    );
  }

  //自定圆点分页指示器
  buildSwiperPagination3() {
    // 分页指示器
    return SwiperPagination(
      //指示器显示的位置
      alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
      // 距离调整
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
      // 指示器构建
      builder: DotSwiperPaginationBuilder(
        // 点之间的间隔
        space: 2,
        // 没选中时的大小
        size: 6,
        // 选中时的大小
        activeSize: 12,
        // 没选中时的颜色
        color: Colors.black54,
        //选中时的颜色
        activeColor: Colors.white),
    );
  }
}
